<script lang="ts" setup>
// import { modulename } from 'your-module-name';
import { useRoute,useRouter } from 'vue-router'
import { ref ,type Ref,onMounted,} from 'vue'
import { shopprosFn } from '@/api/getPro'
import { addCartFn,getCartFn} from '@/api/cart'
import { updateprosFn } from '@/api/updatePro'
// import { CartCom } from '@/components/cart/CartCom.vue'
import CartCom from '@/components/cart/CartCom.vue'  //导入组件不加{}
import { showToast } from 'vant';
const route = useRoute() 
const router = useRouter()
// const proDetail:Ref<any[]> = ref([])
const proDetail:Ref<any> = ref({})  //不是数组了 赋值成对象了   数组也不影响使用，但一定要加.value

const cartlist:Ref<any[]> = ref([])
const cartNum:Ref<number|string> = ref('')
const cartPrice:Ref<number> = ref(0)
// const isLike:Ref<number> = ref(0)

console.log(route.query.proid,route.query.id);
//route.query.id是店铺

 //获取店铺内的商品信息
 onMounted(() => {
    shopprosFn(route.query.id).then(res => {
        console.log(res);
       console.log(route.query.id);
       proDetail.value = res.filter(item => item.proid == route.query.proid)[0]
       console.log(proDetail.value);         
 })

 //获取购物车数量 当前店铺的
 getCartFn().then(res => {
    console.log(res.filter(item => item.id == route.query.id));
    cartlist.value = res.filter(item => item.id == route.query.id)
    cartNum.value = cartlist.value.length
    let num1 = 0
    cartlist.value.forEach(item => {   
        num1 += item.price * item.num
    })
    cartPrice.value = num1
 })
 })


 function addCartClick(pro){
    let num = 1 
    console.log(pro); //对象
    addCartFn({...pro,num}).then(res => {
        console.log(res); 
       
        //获取购物车数量 当前店铺的
        getCartFn().then(res => {
    // console.log(res.filter(item => item.id == route.query.id));
    cartlist.value = res.filter(item => item.id == route.query.id)
    cartNum.value = cartlist.value.length
    let num1 = 0
    cartlist.value.forEach(item => {
       
        num1 += item.price * item.num
    })
    cartPrice.value = num1
 })
    })
 }

 function isLikeClick(){
    //问题：进入页面第一次点击如果是true 第一次点击不生效原因 
    //没加.value,是响应式数据要加.value  proDetail.value.isLike

    // if(proDetail.value.isLike == true){
    //     proDetail.value.isLike = false
    // }
    // else{
        
    proDetail.value.isLike = !proDetail.value.isLike
// }
    // console.log(Number(proDetail.isLike));
    console.log(proDetail.value.isLike);
    //更新数据库接口
    updateprosFn(route.query.id,route.query.proid,
    proDetail.value.isLike).then( res => {
        console.log(res);
       
        // alert('收藏成功')
        //重新获取数据
        shopprosFn(route.query.id).then(res => {
        console.log(res);
       console.log(route.query.id);
       proDetail.value = res.filter(item => item.proid == route.query.proid)[0]
       console.log(proDetail.value.isLike);  

    //      if(res.messsage == '商品状态更新成功' && proDetail.isLike == true){
    //    //重新获取当前商品信息
    //    setTimeout(() => {   //请求拦截器那里请求前做了showLoadingToast加载组件 导致这个覆盖掉了 加个延迟
    //     showToast('收藏成功');
    //    },500) 
    // //    showToast('收藏成功')
    //      }
    //      else if(res.messsage == '商品状态更新成功' && proDetail.isLike == false){
    //         setTimeout(() => {   //请求拦截器那里请求前做了showLoadingToast加载组件 导致这个覆盖掉了 加个延迟
    //     showToast('取消收藏成功');
    //    },500)  //showToast('取消收藏成功')
        //  }               
        
 })     
 setTimeout(() => {   //请求拦截器那里请求前做了showLoadingToast加载组件 导致这个覆盖掉了 加个延迟
        showToast('操作成功');
       },500) 
    })
 }

</script>
<template>
    <div class="box">
        <header>
            <van-icon @click="$router.back()" name="arrow-left" size="20" color="white" style="background-color: gray; width: 20px; height: 20px; padding: 5px; border-radius: 50%;"/>
            <h2>商品详情</h2>
            <i class="iconfont icon-sangediandian"></i>
        </header>
        
        <van-image :src="proDetail.img"></van-image>

        <div style="background-color: white; padding: 10px;">
            <h2>{{ proDetail.proname }}  
                <i v-if="proDetail.isLike" style="color:#f66" @click="isLikeClick" class="iconfont icon-xihuan1"></i>
                <i v-else style="color:gray" @click="isLikeClick" class="iconfont icon-shoucang"></i>
                <!-- <i :style="{color: proDetail.isLike ? '#f66' : 'gray'}" @click="isLikeClick" class="iconfont icon-xihuan1"></i> -->
                <!-- <i style="color:#f66;" class="iconfont icon-shoucang"></i>-->
                </h2> 
           
            <span>主料：{{ proDetail.mainingredient }}</span> <br>
            <span>月售：{{ proDetail.salenum}}</span>

            <h2 style="color:#f66">￥{{ proDetail.price }} 
                <van-button @click="addCartClick(proDetail)" round size="small" color="linear-gradient(to right, #ff6034, #ee0a24)"> + 加入购物车 </van-button>
            </h2> 
            <span>打包费1元/份</span>
            <p>店名：{{ proDetail.shopname }}</p>
            <!-- 地址：{{ proDetail.address }} -->
        </div>
        <van-tabs v-model:active="active" shrink background="#f7f7f7">
  <van-tab :title="'详情'">
   <div style="background-color: white; height: 500px;">详情</div>
  </van-tab>

  <van-tab :title="'评价'">
   <div></div>
  </van-tab>

  <van-tab :title="'推荐'">
   <div>推荐</div>
  </van-tab>
</van-tabs>

<!-- 动作栏组件 cartList-->
 <!-- 组件封装 -->
<CartCom :cartNum="cartNum" :cartPrice="cartPrice" ></CartCom>
<!-- <van-action-bar>
  <van-action-bar-icon icon="cart-o" :badge="cartNum" @click="onClickIcon" />
   <h5 style="color: white;">{{cartPrice+4}}元</h5> &#x3000;
  <span>| 另需配送费￥4 </span>  &#x3000; &#x3000;
  <span>20元起送</span>
</van-action-bar> -->
    </div>
</template>

<style lang="scss" scoped>
.box {
   background-color: #f7f7f7;
   height: 100%;
}
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}
.icon-sangediandian {
    font-size: 20px;
    color:white;
    width: 20px;
    height: 20px;
    background-color: gray;
    border-radius: 50%;
    padding: 5px;
}

.van-image{
    height: 200px;
    width: 100%;
}
// .van-action-bar{
//     margin: 0 40px;
//     bottom: 10px;
//     background-color: gray;
//     width: 80%;
//     height: 40px;
//     position: fixed;
//     border-top-left-radius: 30px !important; /* 左上角圆角 */
//     border-bottom-left-radius: 30px !important; /* 左下角圆角 */
//     border-top-right-radius: 30px; /* 左上角圆角 */
//     border-bottom-right-radius: 30px; /* 左下角圆角 */
// }
// .van-action-bar-icon{
//     background-color: gray;
//     border-top-left-radius: 30px !important; /* 左上角圆角 */
//     border-bottom-left-radius: 30px !important; /* 左下角圆角 */
//     // font-size: 50px;
// }
</style>
